<template>
  <view class="goods-list-page">
    <!-- 顶部状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-container">
        <view class="search-input-wrapper">
          <view class="search-icon">
            <uni-icons type="search" size="20" color="#667eea"></uni-icons>
          </view>
          <input 
            type="text" 
            placeholder="搜索您需要的商品..." 
            v-model="searchKeyword" 
            @confirm="searchGoods"
            class="search-input"
          />
          <view class="clear-btn" v-if="searchKeyword" @tap="clearSearch">
            <uni-icons type="clear" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="search-button" @tap="searchGoods">
          <uni-icons type="search" size="18" color="#fff"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-section">
      <view class="filter-container">
        <view 
          class="filter-item" 
          :class="{ active: currentSort === 'default' }" 
          @tap="changeSort('default')"
        >
          <text class="filter-text">综合</text>
        </view>
        <view 
          class="filter-item" 
          :class="{ active: currentSort === 'price' }" 
          @tap="changeSort('price')"
        >
          <text class="filter-text">价格</text>
          <view class="sort-arrows" v-if="currentSort === 'price'">
            <uni-icons 
              :type="priceAsc ? 'arrowup' : 'arrowdown'" 
              size="12" 
              color="#667eea"
            ></uni-icons>
          </view>
        </view>
        <view 
          class="filter-item" 
          :class="{ active: currentSort === 'sales' }" 
          @tap="changeSort('sales')"
        >
          <text class="filter-text">销量</text>
        </view>
        <view 
          class="filter-item" 
          :class="{ active: currentSort === 'newest' }" 
          @tap="changeSort('newest')"
        >
          <text class="filter-text">新品</text>
          <view class="new-badge" v-if="currentSort === 'newest'">
            <uni-icons type="star-filled" size="10" color="#FFD93D"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-container">
      <view class="goods-grid">
        <view 
          class="goods-card" 
          v-for="item in filteredGoods" 
          :key="item.goods_id" 
          @tap="goToDetail(item.goods_id)"
        >
          <view class="goods-image-wrapper">
            <image 
              class="goods-image"  
              v-if="item.specs && item.specs[0] && item.specs[0].img_url" 
              :src="item.specs[0].img_url" 
              mode="aspectFill"
              :lazy-load="true"
            ></image>
            <view class="goods-image placeholder-image" v-else>
              <view class="placeholder-content">
                <uni-icons type="image" size="32" color="#ccc"></uni-icons>
                <text class="placeholder-text">暂无图片</text>
              </view>
            </view>
            <!-- 折扣标签 -->
            <view 
              class="discount-badge" 
              v-if="item.specs && item.specs[0] && item.specs[0].original_price > item.specs[0].retail_price"
            >
              <text class="discount-text">
                {{ Math.round((1 - item.specs[0].retail_price / item.specs[0].original_price) * 100) }}%
              </text>
            </view>
          </view>
          
          <view class="goods-info">
            <text class="goods-name">{{ item.goods_name || item.name }}</text>
            
            <view class="goods-tags">
              <view class="tag quality-tag">
                <uni-icons type="checkmarkempty" size="12" color="#4ECDC4"></uni-icons>
                <text>正品保证</text>
              </view>
              <view class="tag hot-tag" v-if="item.sales_quantity > 100">
                <uni-icons type="fire" size="12" color="#FF6B6B"></uni-icons>
                <text>热销</text>
              </view>
            </view>
            
            <view class="price-section">
              <view class="price-row">
                <text class="current-price">
                  ¥{{ parseFloat(getDisplayPrice(item)).toFixed(2) }}
                </text>
                <text 
                  class="original-price" 
                  v-if="item.specs && item.specs[0] && item.specs[0].original_price > getDisplayPrice(item)"
                >
                  ¥{{ item.specs && item.specs[0] ? parseFloat(item.specs[0].original_price || 0).toFixed(2) : '0.00' }}
                </text>
              </view>
              <!-- 价格详情行 -->
              <view class="price-detail-row" v-if="getCustomPrice(item) > 0 && getCustomPrice(item) !== getRetailPrice(item)">
                <text class="retail-price">零售价: ¥{{ parseFloat(getRetailPrice(item)).toFixed(2) }}</text>
                <text class="custom-price">会员价: ¥{{ parseFloat(getCustomPrice(item)).toFixed(2) }}</text>
              </view>
              <view class="info-row">
                <text class="sales-info">已售 {{ item.sales_quantity || 0 }}件</text>
                <text class="stock-info" :class="{ 'low-stock': getTotalStock(item) <= 10 }">
                  库存 {{ getTotalStock(item) }}件
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredGoods.length === 0 && !isLoading">
        <view class="empty-icon">
          <uni-icons type="shop" size="60" color="#ddd"></uni-icons>
        </view>
        <text class="empty-text">暂无商品</text>
        <view class="empty-btn" @tap="loadGoodsList">
          <text>重新加载</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-section" v-if="isLoading">
      <view class="loading-animation">
        <uni-icons type="loop" size="24" color="#667eea"></uni-icons>
      </view>
      <text class="loading-text">正在加载...</text>
    </view>
    
    <view class="no-more-section" v-else-if="!hasMoreData && filteredGoods.length > 0">
      <view class="no-more-line"></view>
      <text class="no-more-text">没有更多商品了</text>
      <view class="no-more-line"></view>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom-safe"></view>
  </view>
</template>

<script>
import { getGoodsList } from '@/api/goods'

export default {
  data() {
    return {
      imagePotision:"https://img0.baidu.com/it/u=1998586167,3643575963&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      searchKeyword: '',
      currentSort: 'default',
      priceAsc: true,
      categoryId: '',
      page: 1,
      pageSize: 10,
      hasMoreData: true,
      isLoading: false,
      goodsList: [
        {
          id: 1,
          name: 'Apple iPhone 14 Pro 256GB 暗紫色',
          price: 7999.00,
          sales: 12345,
          imageUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          categoryId: 1,
          isNew: true
        },
        {
          id: 2,
          name: '华为 MateBook 14s 2023款 16+512',
          price: 6999.00,
          sales: 8765,
          imageUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          categoryId: 1,
          isNew: false
        },
        {
          id: 3,
          name: 'Nike Air Max 270 男子运动鞋',
          price: 1299.00,
          sales: 5432,
          imageUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          categoryId: 2,
          isNew: true
        },
        {
          id: 4,
          name: 'Samsung Galaxy S23 Ultra 256GB',
          price: 8999.00,
          sales: 4321,
          imageUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          categoryId: 1,
          isNew: true
        },
        {
          id: 5,
          name: 'Dyson V11 无线吸尘器',
          price: 3999.00,
          sales: 6789,
          imageUrl: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          categoryId: 3,
          isNew: false
        }
        // 更多商品...
      ]
    }
  },
  computed: {
    filteredGoods() {
      // 搜索过滤
      let filtered = this.goodsList.filter(item => {
        const name = item.goods_name || item.name || '';
        return name.toLowerCase().includes(this.searchKeyword.toLowerCase());
      });
      
      // 排序
      switch (this.currentSort) {
        case 'price':
          filtered.sort((a, b) => {
            const priceA = a.specs && a.specs[0] ? a.specs[0].retail_price : 0;
            const priceB = b.specs && b.specs[0] ? b.specs[0].retail_price : 0;
            return this.priceAsc ? priceA - priceB : priceB - priceA;
          });
          break;
        case 'sales':
          filtered.sort((a, b) => {
            const salesA = a.sales_quantity || a.sales || 0;
            const salesB = b.sales_quantity || b.sales || 0;
            return salesB - salesA;
          });
          break;
        case 'newest':
          filtered.sort((a, b) => {
            const isNewA = a.isNew || false;
            const isNewB = b.isNew || false;
            return isNewB - isNewA;
          });
          break;
        default:
          // 默认排序（按ID倒序）
          filtered.sort((a, b) => {
            const idA = a.goods_id || a.id || 0;
            const idB = b.goods_id || b.id || 0;
            return idB - idA;
          });
      }
      
      return filtered;
    }
  },
  onLoad(options) {
    // 接收分类ID参数
    if (options.categoryId) {
      this.categoryId = options.categoryId;
    }
    // 加载商品列表
    this.loadGoodsList();
  },
  onReachBottom() {
    if (!this.isLoading && this.hasMoreData) {
      this.loadMoreGoods();
    }
  },
  methods: {
    searchGoods() {
      this.page = 1;
      this.hasMoreData = true;
      this.loadGoodsList();
    },
    clearSearch() {
      this.searchKeyword = '';
      this.searchGoods();
    },
    changeSort(sortType) {
      if (this.currentSort === sortType) {
        if (sortType === 'price') {
          this.priceAsc = !this.priceAsc;
        }
      } else {
        this.currentSort = sortType;
        if (sortType !== 'price') {
          this.priceAsc = true;
        }
      }
    },
    async loadGoodsList() {
      try {
        this.isLoading = true
        console.log('开始加载商品列表...')
        const res = await getGoodsList({
          page: this.page,
          pageSize: this.pageSize,
          categoryId: this.categoryId,
          keyword: this.searchKeyword,
          sort: this.currentSort,
          include_specs: true
        })

        console.log('商品列表API响应:', res)

        if (res && (res.code === 200 || res.code === 0 || res.success)) {
          let items = []
          
          // 处理不同的数据结构
          if (res.data && res.data.items) {
            items = res.data.items
          } else if (res.data && res.data.list) {
            items = res.data.list
          } else if (res.items) {
            items = res.items
          } else if (res.list) {
            items = res.list
          } else if (res.data && Array.isArray(res.data)) {
            items = res.data
          } else if (Array.isArray(res)) {
            items = res
          }

          console.log('处理后的商品数据:', items)
          
          // 最大兼容的字段映射
          const getImage = (obj) =>
            obj.spec_image || obj.img_url || obj.image || obj.imgUrl || obj.imageUrl || obj.pic || obj.cover || obj.thumb || obj.thumbUrl || obj.main_image || obj.mainImage || '/static/images/default-goods.png';
          
          // 获取零售价
          const getRetailPrice = (obj) =>
            obj.spec_price || obj.retail_price || obj.price || obj.retailPrice || obj.current_price || obj.currentPrice || obj.sale_price || obj.salePrice || obj.min_price || obj.minPrice || 0;
          
          // 获取自定义价格
          const getCustomPrice = (obj) =>
            obj.custom_price || obj.customPrice || obj.vip_price || obj.vipPrice || obj.member_price || obj.memberPrice || obj.special_price || obj.specialPrice || 0;
          
          // 获取原价
          const getOriginalPrice = (obj) =>
            obj.original_price || obj.originalPrice || obj.market_price || obj.marketPrice || obj.old_price || obj.oldPrice || getRetailPrice(obj);

          const mappedItems = (items || []).map(item => {
            // 基础字段映射
            const mappedItem = {
              goods_id: item.goods_id || item.id || item.goodsId,
              goods_name: item.goods_name || item.name || item.title || item.goodsName || '商品名称',
              sales_quantity: item.sales_quantity || item.sales || item.salesQuantity || 0,
              originalPrice: getOriginalPrice(item),
              // 规格信息
              specs: []
            }
            
            // 处理规格信息
            if (item.specs && Array.isArray(item.specs) && item.specs.length > 0) {
              // 如果API返回了规格信息，进行字段映射
              mappedItem.specs = item.specs.map(spec => ({
                spec_id: spec.spec_id || spec.id || spec.specId || mappedItem.goods_id,
                img_url: getImage(spec) || getImage(item),
                retail_price: getRetailPrice(spec) || getRetailPrice(item),
                custom_price: getCustomPrice(spec) || getCustomPrice(item),
                original_price: getOriginalPrice(spec) || getOriginalPrice(item),
                stock: spec.spec_stock || spec.stock || spec.quantity || item.stock || 0,
                spec_name: spec.spec_name || spec.name || spec.specName || '默认规格'
              }))
              
              // 计算规格中的最低价格（优先显示自定义价格）
              const prices = mappedItem.specs.map(spec => {
                // 优先使用自定义价格，如果没有则使用零售价
                return spec.custom_price > 0 ? spec.custom_price : spec.retail_price
              }).filter(price => price > 0)
              
              if (prices.length > 0) {
                const minPrice = Math.min(...prices)
                // 将最低价格设置到第一个规格中，用于显示
                mappedItem.specs[0].display_price = minPrice
                mappedItem.originalPrice = minPrice
              }
            } else {
              // 如果没有规格信息，创建一个默认规格
              mappedItem.specs = [{
                spec_id: mappedItem.goods_id,
                img_url: getImage(item),
                retail_price: getRetailPrice(item),
                custom_price: getCustomPrice(item),
                original_price: getOriginalPrice(item),
                stock: item.spec_stock || item.stock || item.quantity || 0,
                spec_name: '默认规格'
              }]
            }
            
            // 兜底价格
            if (!mappedItem.originalPrice) {
              mappedItem.originalPrice = mappedItem.specs[0].retail_price
            }
            
            return mappedItem
          })

          console.log('最终商品列表:', mappedItems)

          if (this.page === 1) {
            this.goodsList = mappedItems
          } else {
            this.goodsList.push(...mappedItems)
          }

          this.hasMoreData = mappedItems && mappedItems.length >= this.pageSize
        } else {
          console.log('商品API返回错误，使用空列表')
          if (this.page === 1) {
            this.goodsList = []
          }
          this.hasMoreData = false
        }
      } catch (error) {
        console.error('加载商品失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
        if (this.page === 1) {
          this.goodsList = []
        }
        this.hasMoreData = false
      } finally {
        this.isLoading = false
        uni.stopPullDownRefresh()
      }
    },
    loadMoreGoods() {
      if (!this.isLoading && this.hasMoreData) {
        this.page++;
        this.loadGoodsList();
      }
    },
    goToDetail(goodsId) {
      uni.navigateTo({
        url: `/src/pages/goods/detail?id=${goodsId}`
      });
    },
    getTotalStock(item) {
      // 计算所有规格的总库存
      if (item.specs && Array.isArray(item.specs) && item.specs.length > 0) {
        return item.specs.reduce((total, spec) => {
          return total + (spec.stock || 0)
        }, 0)
      }
      // 如果没有规格信息，返回商品级别的库存
      return item.stock || item.spec_stock || item.quantity || 0
    },
    
    // 获取显示价格（优先自定义价格，其次零售价）
    getDisplayPrice(item) {
      if (item.specs && item.specs[0]) {
        const spec = item.specs[0]
        // 优先显示自定义价格，如果没有则显示零售价
        return spec.custom_price > 0 ? spec.custom_price : spec.retail_price
      }
      return 0
    },
    
    // 获取零售价
    getRetailPrice(item) {
      if (item.specs && item.specs[0]) {
        return item.specs[0].retail_price || 0
      }
      return 0
    },
    
    // 获取自定义价格
    getCustomPrice(item) {
      if (item.specs && item.specs[0]) {
        return item.specs[0].custom_price || 0
      }
      return 0
    }
  }
}
</script>

<style lang="scss">
.goods-list-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
}

.status-bar {
  height: var(--status-bar-height);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 搜索区域 */
.search-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx 30rpx 40rpx;
  position: relative;
}

.search-section::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  left: 0;
  right: 0;
  height: 20rpx;
  background: #F8FAFC;
  border-radius: 20rpx 20rpx 0 0;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50rpx;
  padding: 0 30rpx;
  height: 80rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.search-icon {
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #2D3748;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.search-input::placeholder {
  color: #A0AEC0;
}

.clear-btn {
  padding: 10rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.clear-btn:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.1);
}

.search-button {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.search-button:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.4);
}

/* 筛选区域 */
.filter-section {
  background: #fff;
  margin: 0 30rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.filter-container {
  display: flex;
  padding: 0 30rpx;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  position: relative;
  transition: all 0.3s ease;
}

.filter-item:active {
  transform: scale(0.98);
}

.filter-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}

.filter-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 3rpx;
}

.filter-text {
  font-size: 28rpx;
  color: #2D3748;
  font-weight: 500;
  transition: color 0.3s ease;
}

.filter-item.active .filter-text {
  color: #667eea;
  font-weight: 600;
}

.sort-arrows {
  margin-left: 8rpx;
  animation: bounce 0.5s ease;
}

.new-badge {
  margin-left: 6rpx;
  animation: twinkle 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4rpx); }
  60% { transform: translateY(-2rpx); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* 商品区域 */
.goods-container {
  padding: 0 30rpx;
}

.goods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

/* iPad 和更大屏幕适配 */
@media screen and (min-width: 768px) {
  .goods-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;
  }
}

@media screen and (min-width: 1024px) {
  .goods-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28rpx;
  }
}

.goods-card {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.goods-card:active {
  transform: translateY(-4rpx) scale(0.98);
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
}

.goods-image-wrapper {
  position: relative;
  width: 100%;
  height: 280rpx;
  overflow: hidden;
}

.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.placeholder-image {
  background: linear-gradient(135deg, #f7fafc, #edf2f7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.placeholder-text {
  font-size: 20rpx;
  color: #A0AEC0;
}

.discount-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  padding: 8rpx 12rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
}

.discount-text {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.goods-info {
  padding: 24rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.goods-name {
  font-size: 26rpx;
  color: #2D3748;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 72rpx;
}

.goods-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.tag {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 6rpx 10rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.quality-tag {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(78, 205, 196, 0.2));
  color: #4ECDC4;
  border: 1rpx solid rgba(78, 205, 196, 0.3);
}

.hot-tag {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.2));
  color: #FF6B6B;
  border: 1rpx solid rgba(255, 107, 107, 0.3);
}

.price-section {
  margin-top: auto;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.current-price {
  font-size: 32rpx;
  color: #E53E3E;
  font-weight: bold;
}

.original-price {
  font-size: 24rpx;
  color: #A0AEC0;
  text-decoration: line-through;
}

.price-detail-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin: 8rpx 0;
  font-size: 22rpx;
}

.retail-price {
  color: #718096;
  text-decoration: line-through;
}

.custom-price {
  color: #FF6B6B;
  font-weight: 600;
  background: rgba(255, 107, 107, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 6rpx;
}

.info-row {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.sales-info {
  font-size: 22rpx;
  color: #718096;
  background: rgba(113, 128, 150, 0.1);
  padding: 6rpx 10rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.stock-info {
  font-size: 22rpx;
  color: #718096;
  background: rgba(113, 128, 150, 0.1);
  padding: 6rpx 10rpx;
  border-radius: 8rpx;
  display: inline-block;
}

.low-stock {
  color: #FF6B6B;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx;
  text-align: center;
}

.empty-icon {
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #A0AEC0;
  margin-bottom: 40rpx;
}

.empty-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  transition: all 0.3s ease;
}

.empty-btn:active {
  transform: scale(0.95);
}

/* 加载状态 */
.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  gap: 20rpx;
}

.loading-animation {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #718096;
}

.no-more-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  gap: 20rpx;
}

.no-more-line {
  flex: 1;
  height: 1rpx;
  background: linear-gradient(90deg, transparent, #E2E8F0, transparent);
}

.no-more-text {
  font-size: 24rpx;
  color: #A0AEC0;
  padding: 0 20rpx;
}

.bottom-safe {
  height: env(safe-area-inset-bottom);
  height: constant(safe-area-inset-bottom);
  min-height: 30rpx;
}
</style>    